<template>
    <div class="classStyle">
        <el-table :data="tempTableData" style="width: 100%">
          <el-table-column label="班级名称" width="180" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.className}}</span>
              <!-- <span style="margin-left: 10px">{{ tableData.courseTime}}</span> -->
            </template>
          </el-table-column>
          <el-table-column label="班级类型" width="180" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.classType}}</span>
            </template>
          </el-table-column>
          <el-table-column label="班级人数" width="180" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.classNumber}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pageStyle">
          <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="numberPerPage" :total="total"  margin-top="100px">
          </el-pagination>
        </div>
    </div>
</template>

<script>

export default {
    name:'Class',
    data() {
      return {
        tableData: [],
        total:0,
        tempTableData:[],
        numberPerPage:2,
      }
    },
    mounted(){
      this.getList();
    },
    methods: {
      async getList(){
        let result = await this.$http.getClassList();
        //console.log(result);
        this.tableData = result.data.list;
        this.tempTableData = result.data.list.slice(0,this.numberPerPage);
        //console.log(this.tableData);
        this.total = result.data.list.length;

      },
      handleEdit(index, row) {
        // console.log(row.id),
        this.$router.push({
          path:'/ClassUpdate',
          query:{id:row.id}
        });
        //console.log(index, row);
      },
      handleCurrentChange(currentindex){
            // console.log(currentindex);
            this.tempTableData = this.tableData.slice((currentindex-1)*2, currentindex*2)
            // console.log(this.tempTableData);
      },
      created() {
            this.currentdata = this.contentdata.slice(0, 3)
      },


      async handleDelete(index, row) {
        // console.log(index, row);
        // console.log(row.id);
        let result = await this.$http.deleteClass(row.id);
        if(result.code===20000){
          alert("删除成功！");
          location.reload();
          this.$router.go(0);
        }
        else{
          alert("删除失败！");
        }
      }
    }
}
</script>

<style>
.classStyle{
    margin-left:20%;
    width:1000px;
    position:fixed;
    top:100px;
}
.pageStyle{
  top:300px;
  position:fixed;
  margin-left: 330px;
}
</style>